<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <hr/>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>api接口开放平台</h2>
        <p>
          一个提供 API 接口供开发者调用的平台。
          管理员可以接入并发布接口，统计分析各接口调用情况；用户可以注册登录并开通接口调用权限，然后可以浏览接口及在线调试，还能使用客户端
          SDK 轻松在代码中调用接口。
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
          <el-tag type="danger">&yen;免费开源</el-tag>
        </p>
        <p>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-cloudy"
            plain
            @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')"
          >访问码云
          </el-button
          >
          <el-button
            size="mini"
            icon="el-icon-s-home"
            plain
            @click="goTarget('http://ruoyi.vip')"
          >访问主页
          </el-button
          >
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>后端技术</h4>
            <ul>
              <li>SpringBoot</li>
              <li>Spring Security</li>
              <li>JWT</li>
              <li>MyBatis</li>
              <li>Druid</li>
              <li>Fastjson</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端技术</h4>
            <ul>
              <li>Vue</li>
              <li>Vuex</li>
              <li>Element-ui</li>
              <li>Axios</li>
              <li>Sass</li>
              <li>Quill</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider/>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="10">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>信息概要</span>
          </div>
          <el-carousel height="535px">
            <el-carousel-item v-for="i in src" :key="i">
              <el-image :src="i"></el-image>
            </el-carousel-item>
          </el-carousel>

        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="13">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>接口信息浏览</span>
          </div>
          <el-collapse :accordion="true" @change="handleChange">
            <div v-for="(item,index) in infoList">
              <el-collapse-item :title="item.name">
                <p>接口描述: {{ item.description }}</p>
                <p>接口地址: {{ item.url }}</p>
                <p>请求头: {{ item.requestHeader }}</p>
                <p>响应头: {{ item.responseHeader }}</p>
                <p>请求参数: {{ item.requestParams }}</p>
                <P>创建时间： {{ item.createTime }}</P>
                <P>创建时间： {{ item.updateTime }}</P>
                <p>请求方法: {{ item.method }}</p>
                <p>接口状态: {{ item.status ? '开启' : '关闭' }}</p>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>请求参数</span>
                    <el-button type="primary" round style="float:right " @click="invokeInterface(item.id)">发送请求
                    </el-button>
                    <el-button style="float: contour" type="primary"
                               @click="getRequestList(item.requestParams)">
                      生成请求参数列表
                    </el-button>
                  </div>
                  <!--                  <el-input v-model="invoke.requestInvokeParams"></el-input>-->
                  <div v-for="(key,index) in keys">
                    <el-input placeholder="请输入内容" v-model="requestInvokeParamsList[index]">
                      <template slot="prepend">{{ key }}</template>
                    </el-input>
                  </div>
                </el-card>
                <el-card>
                  <h2>{{ res.msg }}</h2>
                </el-card>
              </el-collapse-item>
            </div>
            <!-- <el-pagination small layout="prev, pager, next"  :total="50"> </el-pagination> -->
        </el-collapse>
        <!-- <el-pagination background layout="prev, pager, next" :total="total"
        :current-page="currentPage"
        :page-size="pagesize"
          @current-change=handleCurrentChange>
       </el-pagination> -->
          <div>           
               <pagination small
                v-show="total>0"
               :total="total"
              :page.sync="queryParams.pageNum"
               :limit.sync="queryParams.pageSize"
                 @pagination="getList" />
            </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :md="12" :lg="22">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>联系信息</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 官网：
              <el-link
                href="http://www.ruoyi.vip"
                target="_blank"
              >http://www.ruoyi.vip
              </el-link
              >
            </p>
            <p>
              <i class="el-icon-user-solid"></i> QQ群：<s>满937441</s> <s>满887144332</s>
              <s>满180251782</s> <s>满104180207</s> <s>满186866453</s> <s>满201396349</s>
              <s>满101456076</s> <s>满101539465</s> <s>满264312783</s> <s>满167385320</s>
              <s>满104748341</s> <s>满160110482</s> <s>满170801498</s> <a href="https://jq.qq.com/?_wv=1027&k=eCx8eyoJ"
                                                                          target="_blank">
              108482800</a
            >
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> 微信：<a
              href="javascript:"
            >/ *若依</a
            >
            </p>
            <p>
              <i class="el-icon-money"></i> 支付宝：<a
              href="javascript:"
              class="支付宝信息"
            >/ *若依</a
            >
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>


import {listInfo, invoke} from "@/api/system/info";
import index from "vuex";
import info from "@/store/modules/info";
import requestKey from "@/store/modules/requestKey";
import {compile} from "vue-template-compiler";
import { yiyan } from "../api/system/info";
import { apiWenananWei } from "../api/system/info";



export default {
  name: "Index",
  computed: {
    index() {
      return index
    }
  },
  data() {
    return {
      infoList: [
        {
          createBy: '',
          createTime: '',
          description: '',
          id: '',
          isDeleted: '',
          method: '',
          name: '',
          remark: '',
          requestHeader: '',
          requestParams: '',
          responseHeader: '',
          status: '',
          updateBy: '',
          updateTime: '',
          url: '',
          userId: '',
        }
      ],
      // 版本号
      version: "0.0.1",
      src: ['http://www.wdu.edu.cn/202206/W020220619556978539744.png',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',],
      loading: true,
      drawer: false,
      dialogVisible: false,
      total: 0,
      // 接口列表数据数据
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      test: {},

      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据



      // invoke: {
      //   id: null,
      //   requestInvokeParams: null
      // },
      keys: [],
      res: '',
      // // null: '',
      //
      requestInvokeParamsList: []
    };
  },
  methods: {

    goTarget(href) {
      window.open(href, "_blank");
    },
    getList() {
      this.loading = true
      listInfo(this.queryParams).then(response => {
        console.log(response)
        this.infoList = response.rows
        console.log('-----')
        console.log(this.infoList)
        this.total = response.total
      })
    },

    handleChange() {
      // console.log('jjjj')
      // this.invoke.requestInvokeParams = ''
      this.res = ''
      this.keys = []
      this.requestInvokeParamsList = []
      // this.requestInvokeParamsList = ''
      // requestKey.state.requestKeys=''

    },
    invokeInterface(itemId) {
      this.loading = true
      console.log(this.requestInvokeParamsList)
      this.$set(this.requestInvokeParamsList, 'id', itemId);
      console.log(this.requestInvokeParamsList)
      var length = this.keys.length;
      console.log(length)
      let r={
      };

      if (length === 2) {
        const key1 = this.keys[0].toString()
        const key2 = this.keys[1].toString()
        for (let key in this.requestInvokeParamsList) {
          if (key === '0') {
            this.requestInvokeParamsList[key1] = this.requestInvokeParamsList[key]
            delete this.requestInvokeParamsList[key]
            this.$set(r,key1, this.requestInvokeParamsList[key1])
          }
          if (key === '1') {
            this.requestInvokeParamsList[key2] = this.requestInvokeParamsList[key]
            delete this.requestInvokeParamsList[key]
            this.$set(r,key2, this.requestInvokeParamsList[key2])
          }
        }
      }
      if (length === 1) {
        const key1 = this.keys[0].toString()
        this.requestInvokeParamsList[key1] = this.requestInvokeParamsList[0]
        delete this.requestInvokeParamsList[0]
        this.$set(r,key1, this.requestInvokeParamsList[key1])
      }
      if (length === 3) {
        const key1 = this.keys[0].toString()
        const key2 = this.keys[1].toString()
        const key3 = this.keys[2].toString()
        for (let key in this.requestInvokeParamsList) {
          if (key === '0') {
            this.requestInvokeParamsList[key1] = this.requestInvokeParamsList[key]
            delete this.requestInvokeParamsList[key]
            this.$set(r,key1, this.requestInvokeParamsList[key1])
          }
          if (key === '1') {
            this.requestInvokeParamsList[key2] = this.requestInvokeParamsList[key]
            delete this.requestInvokeParamsList[key]
            this.$set(r,key2, this.requestInvokeParamsList[key2])
          }
          if (key === '2') {
            this.requestInvokeParamsList[key3] = this.requestInvokeParamsList[key]
            delete this.requestInvokeParamsList[key]
            this.$set(r,key3, this.requestInvokeParamsList[key3])
          }
        }
      }

      console.log(this.requestInvokeParamsList.id)
      console.log(this.requestInvokeParamsList.username)

      const s = JSON.stringify(this.requestInvokeParamsList);
      console.log('------------------------')
      console.log(r)
      var s1 = JSON.stringify(r);
      let request = {"requestInvokeParams":s1, "id": itemId}
      invoke(request).then(response => {
        this.res = response
      })
      // yiyan().then(response=>{
      //   this.res = response
      // })
      // apiWenananWei(request).then(response=>{
      //       this.res = response
      // })
    },

    


    getRequestList
      (requestParams) {
      console.log(JSON.parse(requestParams))
      this.keys = Object.keys(JSON.parse(requestParams))

      console.log(this.keys[1])
    }
  },


  created() {
    this.getList()
  },
  handleCurrentChange(currentPage){
    console.log('当前页: '+val);
    this.queryParams.pageNum = currentPage;
    this.getList(queryParams)
  }

};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

}
</style>